<template>
  <div>
    <div class="cus" v-if="show">
      <div class="cus_box" style="width:1000px;">
        <div class="title">
          <span>Employ Record</span>
          <i @click="show = false" class="el-icon-close"></i>
        </div>
        <div class="content">
          <el-form
            :inline="true"
            :model="dataForm"
            ref="dataForm"
            label-width="auto"
          >
            <el-form-item label="" prop="adName">
              <!--              <el-input v-model="orderNo" type="text" placeholder="Order Nnumber" style="width:150px;" clearable></el-input>-->
              <el-input
                v-model="deviceNo"
                type="text"
                placeholder="Device Number"
                style="width:160px;"
                clearable
              >
              </el-input>
            </el-form-item>
            <el-form-item label="" prop="adName">
              <el-date-picker
                v-model="date"
                type="daterange"
                value-format="yyyyMMdd"
                range-separator="To"
                start-placeholder="Start Date"
                end-placeholder="End Date"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button @click="getData" type="primary">Search</el-button>
            </el-form-item>
          </el-form>

          <el-table
            :data="tableData"
            height="250"
            highlight-current-row
            border
            style="width: 100%"
          >
            <!-- <el-table-column prop="id" label="ID" width="180">
            </el-table-column> -->
            <el-table-column
              prop="deviceNo"
              label="Device Number"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="userName"
              label="Operations People"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="cabinetNo"
              label="Cabinet Door Number"
              align="center"
            >
              <template slot-scope="scope">
                No.{{ scope.row.cabinetNo }}
              </template>
            </el-table-column>
            <el-table-column
              prop="result"
              label="Door Opening Result"
              align="center"
            >
              <template slot-scope="scope">
                <div :class="scope.row.result == 1 ? 'green' : 'red'">
                  {{
                    scope.row.result == 0
                      ? "Failure"
                      : scope.row.result == 1
                      ? "Success"
                      : scope.row.result == 2
                      ? "Battery Detection Failure"
                      : "--"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="ctime"
              label="Time"
              width="180"
              align="center"
            >
            </el-table-column>
            <!-- <el-table-column prop="deviceType" label="Operations设备Type">
            </el-table-column> -->
            <el-table-column
              prop="remake"
              label="Operations Details"
              align="center"
            >
            </el-table-column>
          </el-table>

          <div class="btns">
            <el-button type="primary" @click="show = false">Close</el-button>
            <!--          <el-button type="primary" @click="dataFormSubmit()">关联</el-button>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isMobile } from "@/utils/validate";
export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        callback(new Error("Phone Format Error"));
      } else {
        callback();
      }
    };
    return {
      show: false,
      dataForm: {},
      loading: false,

      tableData: [],

      deviceNo: "",
      maintenancerId: "",
      date: "",
      beginTime: "",
      endTime: ""
    };
  },
  watch: {
    date(val) {
      console.log(val);
      if (val) {
        this.beginTime = val[0];
        this.endTime = val[1];
      } else {
        this.beginTime = "";
        this.endTime = "";
      }
    }
  },
  computed: {},
  components: {},

  mounted() {},
  methods: {
    async getData() {
      const res = await this.apis.maintenancer_oprList({
        pageNum: 1,
        pageSize: 100000,
        maintenancerId: this.maintenancerId,
        deviceNo: this.deviceNo,
        beginTime: this.beginTime,
        endTime: this.endTime
      });
      const list = res.rows || [];
      this.tableData = list;
    },
    // Form Submit
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
        }
      });
    },
    showFun(row) {
      this.maintenancerId = row.id;
      this.show = true;
      this.getData();
    }
  }
};
</script>
<style scoped lang="scss">
.green {
  color: #66c337;
}

.red {
  color: #f76b6a;
}
</style>
